<!--
 * @Author: byron
 * @Date: 2021-10-06 23:16:53
 * @LastEditTime: 2021-10-07 10:13:30
-->
<template>
    <div class="header">
        <div class="img-warp">
            <img :src="topData.coverImgUrl" alt="" />
        </div>
        <div class="content">
            <div class="title-warp">
                <span class="title">{{ topData.name }}</span>
            </div>
            <div class="author-warp">
                <div class="avator-warp">
                    <img :src="creatorInfo.avatarUrl" alt="" />
                </div>
                <div>{{ creatorInfo.nickname }}</div>
                <div>{{ topData.createTime }} 创建</div>
            </div>
            <div class="action-warp">
                <NButton class="button">
                    <Icon
                        :size="18"
                        type="play1"
                        style="vertical-align: -1px;  margin-right: 4px;"
                    ></Icon>
                    <span>播放全部</span>
                </NButton>
            </div>
            <div class="desc-warp">
                <p class="desc">
                    <span>标签：{{ topData.tags }}</span>
                </p>
                <p class="desc">
                    <span class="value">简介：{{ topData.desc }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        topData: {
            type: Object,
        },
    },
    data() {
        return {}
    },
    watch: {},
    computed: {
        creatorInfo() {
            if (!this.topData.creator) return
            return {
                avatarUrl: this.topData.creator.avatarUrl,
                nickname: this.topData.creator.nickname,
            }
        },
    },
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    padding: 36px;
    .img-warp {
        width: 200px;
        height: 200px;
        margin-right: 24px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .title-warp {
            align-items: center;
            margin-bottom: 12px;
            .title {
                font-size: 20px;
                color: var(--font-color-white);
            }
        }
        .author-warp {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            .avator-warp {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 8px;
                overflow: hidden;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        .action-warp {
            margin-bottom: 18px;
            .button {
                background: #f95043;
                background: linear-gradient(
                    to right,
                    #fa5143,
                    #f44d41,
                    #d53b32
                );
                color: #fbdfdd;
                border: none;
                font-size: 18px !important;
                .middle {
                    vertical-align: middle;
                }
            }
        }
        .desc {
            margin-bottom: 8px;

            .value {
                @include text-ellipsis-multi(3);
            }
        }
    }
}
</style>
